import { StyleSheet, View, Pressable, Text, StatusBar as RNStatusBar, SafeAreaView } from "react-native";
import { StatusBar } from "expo-status-bar";
import { router } from 'expo-router'
import AntDesign from '@expo/vector-icons/AntDesign';
import { CColor, CFlex } from "../constant/css";

const styles = StyleSheet.create({
    headerText: {
        fontWeight: 'bold',
        fontSize: 17,
        color: CColor.Black,
    },
    headerSplit: {
        borderBottomWidth: 1,
        borderColor: CColor.Gray,
    }
})

/**
 * * 页面根组件
 * @param {object} props 配置项
 * @param {object} props.children 子组件
 * @param {string} props.bg 背景色
 * @param {'auto' | 'inverted' | 'light' | 'dark'} props.status 状态栏
 * @returns {React.ReactElement}
 */
export const RootView = ({ children, bg = undefined, status = "auto", }) =>
    <View style={{ flex: 1, paddingTop: RNStatusBar.currentHeight || 0, backgroundColor: bg || '#fff' }}>
        <StatusBar style={status} backgroundColor={bg || '#fff'} />
        <SafeAreaView style={{ backgroundColor: bg || '#fff' }} />
        {children}
    </View>

/**
 * * 页面头
 * @param {object} props
 * @param {string} props.title 标题
 * @param {Function} props.LeftComponent 标题
 * @param {Function} props.centerComponent 标题
 * @param {Function} props.rightComponent 标题
 * @returns {React.ReactElement}
 */
export const Header = (props) => {
    const {
        title,
        LeftComponent, centerComponent, rightComponent
    } = props
    return (
        <View style={[CFlex.row, CFlex.sc, styles.headerSplit, { height: 50 }]}>
            {LeftComponent ?
                <View style={{ width: 50, height: '100%' }}> {LeftComponent()}</View> :
                <Pressable style={[{ width: 50, height: '100%' }, CFlex.cc]} onPress={() => router.back()}>
                    <AntDesign name="arrowleft" size={24} color="black" />
                </Pressable>
            }
            <View style={[{ flex: 5, height: '100%' }, CFlex.cc]}>
                <Text style={styles.headerText}>{title}</Text>
            </View>
            <View style={[{ width: 50, backgroundColor: 'red' }]}>
                {rightComponent?.()}
            </View>
        </View>
    )
}


